<template>
  <view class="content">
    <view class="hei"></view>
    <view class="title">注册</view>
    <view class="hei"></view>
    <fui-input :borderBottom="false" isFillet backgroundColor="#eee" placeholder="请输入手机号" v-model="registerData.phone">
      <template v-slot:left>
        <view style="padding: 0 20rpx"><fuiIcon name="mobile" /></view>
      </template>
    </fui-input>
    <view class="hei"></view>
    <fui-input :borderBottom="false" isFillet backgroundColor="#eee" password placeholder="请输入密码" v-model="registerData.pwd">
      <template v-slot:left>
        <view style="padding: 0 20rpx"><fuiIcon name="lock" /></view>
      </template>
    </fui-input>
    <view class="hei"></view>
    <fui-input :borderBottom="false" isFillet backgroundColor="#eee" password placeholder="请确认密码" v-model="registerData.surePwd">
      <template v-slot:left>
        <view style="padding: 0 20rpx"><fuiIcon name="lock-fill" /></view>
      </template>
    </fui-input>
    <view class="hei"></view>
    <fui-input :borderBottom="false" isFillet backgroundColor="#eee" placeholder="请输入验证码" v-model="registerData.code">
      <template v-slot:left>
        <view style="padding: 0 20rpx"><fuiIcon name="captcha" /></view>
      </template>
      <template v-slot>
        <image v-if="captchaSrc" :src="captchaSrc" alt="验证码" @click="getCaptcha" style="width: 200rpx; height: 70rpx" />
        <fui-button v-else width="200rpx" height="70rpx" plain color="#000" background="#ccc" @click="getCaptcha">获取验证码</fui-button>
      </template>
    </fui-input>
    <view class="hei" style="height: 100rpx"></view>
    <fui-button background="#000" @click="register">注册</fui-button>
    <view class="changeLogin" @click="changeLogin">已有账号立即登录</view>
  </view>
</template>

<script setup lang="ts">
import fuiInput from "@/components/firstui/fui-input/fui-input.vue";
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue";
import fuiButton from "@/components/firstui/fui-button/fui-button.vue";
import { reactive, ref, defineEmits } from "vue";
import Service from "@/service";
const captchaSrc = ref("");
const registerData = reactive({
  phone: "1381111111",
  pwd: "123456",
  code: "",
  surePwd: "123456",
});
const getCaptcha = () => {
  Service.User.getCaptcha().then(res => {
    captchaSrc.value = res + "?" + Math.random();
  });
};
const register = () => {
  if (registerData.phone == "") {
    return uni.showModal({ title: "提示", content: "电话号码不能为空" });
  }
  if (registerData.pwd == "") {
    return uni.showModal({ title: "提示", content: "密码不能为空" });
  }
  if (registerData.surePwd == "") {
    return uni.showModal({ title: "提示", content: "确认密码不能为空" });
  }
  if (registerData.code == "") {
    return uni.showModal({ title: "提示", content: "验证码不能为空" });
  }
  if (registerData.pwd !== registerData.surePwd) {
    return uni.showModal({ title: "提示", content: "两次输入密码不匹配" });
  }
  Service.User.register(registerData).then(res => {
    // getCaptcha();
    console.log(res);
  });
};
const changeLogin = () => {
  uni.$emit("changeLogin");
};
</script>
<style scoped>
.content {
  width: 710rpx;
  margin: 20rpx;
  background: transparent;
}
.title {
  font-size: 50rpx;
  font-weight: bold;
  padding-left: 20rpx;
  color: white;
}
.hei {
  height: 20rpx;
}
.changeLogin {
  width: 700rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 35rpx;
  color: white;
  text-align: right;
  text-decoration: underline;
}
</style>
